<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收益流水管理 - 管理员后台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: '#1F2329',
            'gray-light': '#F2F3F5',
            'gray-medium': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
      .table-hover-row:hover {
        background-color: rgba(22, 93, 255, 0.03);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- 左侧Logo和标题 -->
      <div class="flex items-center">
        <div class="text-primary text-2xl mr-2">
          <i class="fa fa-line-chart"></i>
        </div>
        <div>
          <h1 class="text-lg font-semibold">管理后台</h1>
          <p class="text-xs text-gray-500">收益流水管理系统</p>
        </div>
      </div>

      <!-- 右侧用户信息 -->
      <div class="flex items-center">
        <div class="mr-4 relative">
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-bell-o text-xl"></i>
            <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
          </button>
        </div>
        <div class="flex items-center">
          <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像" class="w-8 h-8 rounded-full mr-2">
          <span class="text-sm font-medium">管理员</span>
          <i class="fa fa-angle-down ml-1 text-gray-500"></i>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- 主要内容区 -->
<div class="flex flex-1 overflow-hidden">
  <!-- 侧边栏导航 -->
  <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block">
    <nav class="p-4">
      <ul class="space-y-1">
        <!-- 仅保留收益流水和系统设置选项 -->
        <li>
          <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md bg-primary/10 text-primary font-medium">
            <i class="fa fa-money w-5 text-center mr-3"></i>
            <span>收益流水</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-600 hover:bg-gray-light transition-colors">
            <i class="fa fa-cog w-5 text-center mr-3"></i>
            <span>系统设置</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- 主内容 -->
  <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">收益流水管理</h2>
      <p class="text-gray-500 mt-1">查看和管理系统的所有收益流水记录</p>
    </div>

    <!-- 筛选区域 -->
    <div class="bg-white rounded-lg p-4 mb-6 card-shadow">
      <form id="filterForm" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">日期范围</label>
          <div class="flex items-center border rounded-md overflow-hidden">
            <input type="date" id="startDate" class="flex-1 px-3 py-2 text-sm border-0 focus:ring-0" value="2023-06-01">
            <span class="px-2 text-gray-500">至</span>
            <input type="date" id="endDate" class="flex-1 px-3 py-2 text-sm border-0 focus:ring-0" value="2023-06-30">
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">流水类型</label>
          <select class="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
            <option value="all">全部类型</option>
            <option value="income">收入</option>
            <option value="expense">支出</option>
            <option value="refund">退款</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">支付方式</label>
          <select class="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
            <option value="all">全部方式</option>
            <option value="alipay">支付宝</option>
            <option value="wechat">微信支付</option>
            <option value="card">银行卡</option>
          </select>
        </div>

        <div class="flex items-end">
          <button type="button" class="bg-primary text-white px-4 py-2 rounded-md text-sm mr-2 hover:bg-primary/90 transition-colors">
            <i class="fa fa-search mr-1"></i> 查询
          </button>
          <button type="button" class="bg-white border border-gray-300 px-4 py-2 rounded-md text-sm hover:bg-gray-50 transition-colors">
            <i class="fa fa-refresh mr-1"></i> 重置
          </button>
        </div>
      </form>
    </div>

    <!-- 收益概览卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <div class="bg-white rounded-lg p-4 card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">今日总收入</p>
            <h3 class="text-2xl font-bold mt-1">¥12,580.00</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-gray-500 ml-1">较昨日</span>
            </p>
          </div>
          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-calendar-check-o"></i>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg p-4 card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">本月总收入</p>
            <h3 class="text-2xl font-bold mt-1">¥328,450.00</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-gray-500 ml-1">较上月</span>
            </p>
          </div>
          <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
            <i class="fa fa-calendar"></i>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg p-4 card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">总订单数</p>
            <h3 class="text-2xl font-bold mt-1">12,845</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 5.3% <span class="text-gray-500 ml-1">较上月</span>
            </p>
          </div>
          <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
            <i class="fa fa-shopping-bag"></i>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg p-4 card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">退款金额</p>
            <h3 class="text-2xl font-bold mt-1">¥8,450.00</h3>
            <p class="text-danger text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 3.1% <span class="text-gray-500 ml-1">较上月</span>
            </p>
          </div>
          <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
            <i class="fa fa-undo"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
      <div class="bg-white rounded-lg p-4 lg:col-span-2 card-shadow">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-semibold">收益趋势</h3>
          <div class="flex space-x-2">
            <button class="px-3 py-1 text-xs rounded-md bg-primary/10 text-primary">日</button>
            <button class="px-3 py-1 text-xs rounded-md text-gray-500 hover:bg-gray-light">周</button>
            <button class="px-3 py-1 text-xs rounded-md text-gray-500 hover:bg-gray-light">月</button>
            <button class="px-3 py-1 text-xs rounded-md text-gray-500 hover:bg-gray-light">年</button>
          </div>
        </div>
        <div class="h-80">
          <canvas id="revenueChart"></canvas>
        </div>
      </div>

      <div class="bg-white rounded-lg p-4 card-shadow">
        <h3 class="font-semibold mb-4">支付方式占比</h3>
        <div class="h-64 flex items-center justify-center">
          <canvas id="paymentMethodChart"></canvas>
        </div>
        <div class="grid grid-cols-3 gap-2 mt-4">
          <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
            <span class="text-xs text-gray-600">支付宝</span>
          </div>
          <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
            <span class="text-xs text-gray-600">微信支付</span>
          </div>
          <div class="flex items-center">
            <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
            <span class="text-xs text-gray-600">银行卡</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 流水明细表格 -->
    <div class="bg-white rounded-lg card-shadow overflow-hidden">
      <div class="flex justify-between items-center p-4 border-b">
        <h3 class="font-semibold">流水明细</h3>
        <div>
          <button class="bg-white border border-gray-300 px-3 py-1 rounded-md text-sm hover:bg-gray-50 transition-colors mr-2">
            <i class="fa fa-download mr-1"></i> 导出
          </button>
          <div class="relative inline-block">
            <input type="text" placeholder="搜索流水号/订单号" class="pl-8 pr-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">流水号</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支付方式</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额(元)</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <!-- 表格数据行 -->
          <tr class="table-hover-row transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PAY20230630001</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ORD20230630125</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30 14:35:22</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">收入</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">支付宝</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">+1,250.00</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">已完成</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
              <a href="#" class="hover:underline">详情</a>
            </td>
          </tr>

          <tr class="table-hover-row transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PAY20230630002</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ORD20230630126</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30 15:12:08</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">收入</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">微信支付</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">+890.00</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">已完成</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
              <a href="#" class="hover:underline">详情</a>
            </td>
          </tr>

          <tr class="table-hover-row transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REF20230630001</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ORD20230629105</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30 11:05:45</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">退款</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">支付宝</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">-560.00</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">已完成</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
              <a href="#" class="hover:underline">详情</a>
            </td>
          </tr>

          <tr class="table-hover-row transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PAY20230630003</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ORD20230630127</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30 16:45:32</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">收入</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">银行卡</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">+2,380.00</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">处理中</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
              <a href="#" class="hover:underline">详情</a>
            </td>
          </tr>

          <tr class="table-hover-row transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PAY20230630004</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ORD20230630128</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30 17:22:15</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">收入</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">微信支付</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">+1,560.00</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">已完成</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
              <a href="#" class="hover:underline">详情</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 border-t flex justify-between items-center">
        <div class="text-sm text-gray-500">
          显示 1 到 5 条，共 128 条记录
        </div>
        <div class="flex space-x-1">
          <button class="px-3 py-1 border rounded-md text-sm text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="px-3 py-1 border rounded-md text-sm bg-primary text-white">1</button>
          <button class="px-3 py-1 border rounded-md text-sm text-gray-700 hover:bg-gray-50">2</button>
          <button class="px-3 py-1 border rounded-md text-sm text-gray-700 hover:bg-gray-50">3</button>
          <button class="px-3 py-1 border rounded-md text-sm text-gray-700 hover:bg-gray-50">4</button>
          <button class="px-3 py-1 border rounded-md text-sm text-gray-700 hover:bg-gray-50">5</button>
          <button class="px-3 py-1 border rounded-md text-sm text-gray-500 hover:bg-gray-50">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </main>
</div>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4">
  <div class="container mx-auto px-4 text-center text-sm text-gray-500">
    © 2023 收益流水管理系统 版权所有
  </div>
</footer>

<!-- JavaScript -->
<script>
  // 页面加载完成后初始化图表
  document.addEventListener('DOMContentLoaded', function() {
    // 收益趋势图表
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    const revenueChart = new Chart(revenueCtx, {
      type: 'line',
      data: {
        labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
        datasets: [
          {
            label: '收入',
            data: [8500, 9200, 8800, 10500, 11200, 10800, 12500],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true
          },
          {
            label: '支出',
            data: [1200, 1500, 1300, 1800, 1600, 1900, 2100],
            borderColor: '#FF4D4F',
            backgroundColor: 'rgba(255, 77, 79, 0.1)',
            tension: 0.4,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
          },
          tooltip: {
            mode: 'index',
            intersect: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              callback: function(value) {
                return '¥' + value;
              }
            }
          }
        },
        interaction: {
          mode: 'nearest',
          axis: 'x',
          intersect: false
        }
      }
    });

    // 支付方式占比图表
    const paymentCtx = document.getElementById('paymentMethodChart').getContext('2d');
    const paymentChart = new Chart(paymentCtx, {
      type: 'doughnut',
      data: {
        labels: ['支付宝', '微信支付', '银行卡'],
        datasets: [{
          data: [45, 40, 15],
          backgroundColor: [
            '#165DFF',
            '#52C41A',
            '#FAAD14'
          ],
          borderWidth: 0,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    });
  });

  // 简单的筛选表单处理
  document.getElementById('filterForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 这里可以添加表单提交逻辑
    alert('筛选条件已提交，正在加载数据...');
  });
</script>
</body>
</html>